<template>
  <view class="wrapper">
    <u-navbar
      :title="$t('feeServices.ServiceDetails')"
      @rightClick="rightClick"
      :autoBack="false"
			@leftClick="leftClick(urlIndex)"
      bgColor="#61BDB2"
      leftIconColor="#ffffff"
      titleStyle="color: #ffffff"
      placeholder
    >
    </u-navbar>

    <view class="container">
      <view class="content">
        <view class="content__info">
          <view class="content__info__header">
            {{ feeDetail.title }}
          </view>
          <view class="content__info__center">
            <view class="content__info__center__left">
              <view class="iconfont icon-weizhi-1 my-icon"> </view>
              <view class="place">{{ feeDetail.workPlaceNew }}</view>
            </view>
            <view class="content__info__center__right">
              <view class="iconfont icon-jiezhishijian my-icon"> </view>
              <text>{{ $t("feeServices.Deadline") }}</text>
              <text class="info-center-highlight">{{
                buildI18nTime(feeDetail.deadline)
              }}</text>
            </view>
          </view>
          <view class="content__info__bottom">
            <view class="bottom-money"
              >{{ getCoinName(feeDetail.currencyId)
              }}{{ feeDetail.remuneration }}</view
            >
            <view class="time-tip" v-if="feeDetail.allowReferrals === 1">
              <image
                src="~@/static/image/feeServices/recommend.png"
                class="people-icon"
                alt=""
              ></image>
              <view class="tip-style"
                >{{ $t("feeServices.allowReferrals") }}:
                {{
                  feeDetail.referralsMoney == -1 || !feeDetail.referralsMoney
                    ? $t("feeServices.Negotiable")
                    : $t("feeServices.specificAmount") +
                      ` ${getCoinName(feeDetail.currencyId)}${
                        feeDetail.referralsMoney
                      }`
                }}</view
              >
            </view>
          </view>
        </view>

        <view class="content__description">
          <view class="content__description__header">
            {{ $t("feeServices.requirements") }}
          </view>
          <view class="content__description__content">{{
            feeDetail.requirements
          }}</view>
        </view>

        <view class="user-box">
          <view class="user-img">
            <image
              :src="
                feeDetail.user.avatarCompress ||
                feeDetail.user.avatar ||
                $store.state.normalPic
              "
              alt=""
              class="img"
							mode="aspectFill"
            ></image>
          </view>
          <view class="user-right-box">
            <view class="user-name">{{ feeDetail.user.userName || formatUserName(feeDetail.user) }}</view>
            <!-- <view class="last-seen">{{ $t('dating.lastSeen', { value:time() }) }}</view> -->
            <view class="last-seen">{{ time() }}</view>
          </view>
        </view>
      </view>

      <view class="bottom">
        <view class="bottom__btn_1" @click="getCustomer(7)">{{ $t('feeServices.contactAdmin') }}</view>
        <view class="bottom__btn_2" @click="handleCreat" v-if="!($store.state.userId && $store.state.userId == this.feeDetail.userId)">{{ $t('feeServices.applyNow') }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryRewardDetail } from "@/services/feeServices.js";
import { getCurrencyList } from "@/services/bourse.js";
import { buildI18nTime } from "@/utils/date-util.js";
import { queryCreateModuleGroup, queryGroupDetail } from "@/services/group.js";
import { getDefaultColor, getTimeDiff } from "@/utils/index";
import { mapActions, mapState } from "vuex";
export default {
  name: "RecruitmentDetail",
  data() {
    return {
      id: null,
      searchForm: {
        pageSize: 10,
        pageNum: 1,
        title: null,
        labelId: null,
        orderByColumn: "remuneration",
        isAsc: "asc",
      },
      feeDetail: {
        user: {},
      },
      currencyList: [],
      feePostShow: false,
      language: "",
      urlIndex: 'RewardDetail',
    };
  },
  async onLoad(e) {
    this.language = uni.getLocale();
    this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
    if (e.id) {
      this.id = e.id;
      await this.getCurrency();
      this.getMainDetail();
    }
  },
  computed: {
    ...mapState(["userInfo", "token"]),
  },
  methods: {
    ...mapActions(["changeGroupList"]),
    buildI18nTime(value) {
      return buildI18nTime(value);
    },
    time() {
      return getTimeDiff(this.feeDetail.user.lastLoginTime, "minutes", true);
    },
    async handleCreat() {
      if(!this.token) {
        uni.navigateTo({
          url: "/pages/login/Login",
        });
        return
      }
      uni.showLoading()
      const { result } = await queryCreateModuleGroup({
        groupName: this.feeDetail.user.userName || this.formatUserName(this.feeDetail.user),
        avatar: this.feeDetail.user.avatar || this.$store.state.normalPic,
        avatarCompress: this.feeDetail.user.avatarCompress || this.$store.state.normalPic,
        memberIds: [this.feeDetail.userId],
        moduleType: 3,
      });
      uni.showLoading()
      if (result.code === 200) {
        var group = await this.$RongIMLib.getConversation({
          targetId: result.data,
          conversationType: 3
        })
        const resp = await queryGroupDetail(result.data)
        uni.showLoading()
        if (resp.success) {
          resp.result.data.myName = resp.result.data.jyRemark || 'OMLOOKER'
          // console.log(group, 'group')
          if (group) {
            group.data.info = resp.result.data
            var groupList = this.$store.state.groupList;
            if (!this.$store.state.moduleGroupInfo[3]) {
              this.$store.state.moduleGroupInfo[3] = [
                {
                  groupId: result.data,
                  groupName: this.feeDetail.user.userName || this.formatUserName(this.feeDetail.user),
                  moduleType: 3,
                },
              ];
            } else {
              var index = this.$store.state.moduleGroupInfo[3].find(
                (o) => o.groupId == result.data
              );
              if (index == -1) {
                this.$store.state.moduleGroupInfo[3].push({
                  groupId: result.data,
                  groupName: this.feeDetail.user.userName || this.formatUserName(this.feeDetail.user),
                  moduleType: 3,
                });
              }
            }
            var gIndex = groupList.indexOf((o) => o.groupId == result.data);
            if (gIndex > -1) {
              groupList[gIndex] = group.data.info;
            } else {
              groupList.push(group.data.info);
            }
            await this.changeGroupList(groupList);
            console.log(this.$store.state.groupList)
            uni.hideLoading()
            //直接跳转页面
            uni.navigateTo({
              url:
                "/pages/chat/GroupChat?isFriendGroup=true&backType=1&isModule=true&groupId=" +
                result.data,
              fail(err) {
                console.log(err);
                uni.hideLoading()
              },
            });
          }
        }
      }
    },
    async getMainDetail() {
      const resp = await queryRewardDetail(this.id);
      if (resp.result.code === 200) {
        this.feeDetail = resp.result.data;
        this.feeDetail.workPlaceNew = this.feeDetail.workPlace ? this.getRegionNameList(JSON.parse(this.feeDetail.workPlace)).join(',') : null
      }
    },
    async getCurrency() {
      const resp = await getCurrencyList();
      if (resp.result.code === 200) {
        this.currencyList = resp.result.data;
      }
    },
    getCoinName(currencyId) {
      const coinIndex = this.currencyList.findIndex(
        (value) => String(value.id) === String(currencyId)
      );
      return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : "";
    },
    getLabelLangType(obj) {
      if (this.language === "zh-Hans") {
        return obj.label.cn;
      } else if (this.language === "en") {
        return obj.label.en;
      } else if (this.language === "ru") {
        return obj.label.ru;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: calc(100vh - var(--status-bar-height));
  background-color: #61bdb2;

  .container {
    position: relative;
    box-sizing: border-box;
    height: calc(100vh - var(--status-bar-height) - 44px - 150rpx);
    padding-bottom: 30rpx;
    margin-top: 30rpx;
    background-color: #f6f6f6;
    border-radius: 50rpx 50rpx 0rpx 0rpx;
    overflow-y: auto;
    .content {
      width: 100%;
      height: fit-content;
      .content__info {
        width: 100%;
        background: #ffffff;
        padding: 50rpx 40rpx 35rpx;
        box-sizing: border-box;
        .content__info__header {
          font-size: 36rpx;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #000000;
					 word-break: break-word;
					        word-wrap: break-word;
        }
        .content__info__center {
          width: 100%;
          display: flex;
          align-items: center;
          font-size: 26rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #878787;
          margin-top: 30rpx;
          .my-icon {
            font-size: 32rpx;
            margin-right: 12rpx;
          }
          .place {
            word-wrap: break-word;
            white-space: pre-wrap;
            word-break: break-all;
          }
          .content__info__center__left {
            display: flex;
            align-items: center;
            flex: 1;
            margin-right: 10rpx;
          }
          .content__info__center__right {
            display: flex;
            align-items: center;
          }
          .info-center-highlight {
            color: #61bdb2;
            margin-left: 10rpx;
          }
        }
        .content__info__bottom {
          display: flex;
          align-items: center;
          margin-top: 30rpx;
          .bottom-money {
            font-size: 36rpx;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #fe6600;
          }
          .time-tip {
            margin-left: auto;
            width: fit-content;
            display: flex;
            align-items: center;
            height: 46rpx;
            background: #fff0e5;
            border-radius: 10rpx;
            padding: 0rpx 20rpx 0rpx 14rpx;
            .people-icon {
              width: 36rpx;
              height: 36rpx;
            }
            .tip-style {
              font-size: 24rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #fe6600;
              margin-left: 9rpx;
            }
          }
        }
      }
      .content__description {
        width: 100%;
        padding: 40rpx 40rpx 60rpx;
        box-sizing: border-box;
        background: #ffffff;
        margin-top: 20rpx;
        .content__description__header {
          font-size: 30rpx;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #000000;
        }
        .content__description__content {
          margin-top: 30rpx;
          font-size: 26rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #000000;
          word-wrap: break-word;
          white-space: pre-wrap;
          word-break: break-all;
          line-height: 40rpx;
        }
      }
      .user-box {
        width: 100%;
        padding: 30rpx;
        display: flex;
        align-items: center;
				box-sizing: border-box;
				margin-top: 20rpx;
        background: #FFFFFF;
        .user-img {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          margin-right: 30rpx;
          .img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .user-right-box {
          flex: 1;
          .user-name {
						height: 28rpx;
            font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #000000;
          }
          .last-seen {
						height: 24rpx;
            font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #878787;
						margin-top: 14rpx;
          }
        }
      }
    }

    .bottom {
      width: 100%;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(0,0,0,0.15);
      position: fixed;
      left: 0;
      bottom: 0;
      padding: 17rpx 30rpx;
      padding-bottom: calc(constant(safe-area-inset-bottom) + 17rpx);
		  padding-bottom: calc(env(safe-area-inset-bottom) + 17rpx);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .bottom__btn_1 {
        flex: 1;
        width: 330rpx;
        height: 90rpx;
        background: #FFFFFF;
        border: 2rpx solid #61BDB2;
        border-radius: 20rpx;
        box-sizing: border-box;
        text-align: center;
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #61BDB2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .bottom__btn_2 {
        flex: 1;
        margin-left: 30rpx;
        width: 330rpx;
        height: 90rpx;
        background: #61BDB2;
        border-radius: 20rpx;
        text-align: center;
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
